<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="C:\Users\admin\22ruangong_class1\vue-project\src\js\axios-0.18.0.js"></script>  <!--js目录下的axios-0.18.0.js文件-->
    <script src="C:\Users\admin\22ruangong_class1\vue-project\src\js\vue.js"></script>
</head>
<body>

    <div id='app' style="text-align: center;">
        <table  border="1px" cellspacing=0 width=60% >
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>头像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>
            <tr center v-for="(item,index) in tableData">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td><img :src="item.image" style="width: 100%; height: 200px;" ></td>
                <td>
                    <span v-if="item.gender==1">男</span>
                    <span v-if="item.gender==0">女</span>
                </td>
                <td>{{item.job}}</td>
                <td>{{item.entrydate}}</td>
                <td>{{item.updatetime}}</td>
            </tr>

        </table>
    </div>
    
    <script>
        new Vue({
            el:'#app',
            data:{
                tableData:[]
            },
            // 钩子函数，页面初始化便加载
            mounted() {
                // 通过axios发起请求，获取数据
                axios.get('http://127.0.0.1:4523/m1/5315146-4985145-default/emp/list').then(res=>{
                    // this代表当前的Vue对象
                    this.tableData=res.data.data
                })
            },
        });
    </script>
</body>
</html>

